<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> vue的生命周期函数2 </title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>
<script>
    const app = Vue.createApp({
        data(){
            return{
                message:"收购腾讯了快点 "
            }
        },
        methods: {
            handleItemClick() {
                // alert('111111')
                this.message = this.message=="收购腾讯了快点"?"看不上":"阿里"
            }
        },
        beforeUpdate(){
            console.log("data中的数据发生变化时 触发了我")
            console.log(document.getElementById('app').innerHTML)
        },
        updated(){
            console.log("data变化 页面重新渲染完后 会自动执行的函数")
            console.log(document.getElementById('app').innerHTML)
        },
        beforeUnmount() {
            console.log('beforeUnmount')
            console.log(document.getElementById('app').innerHTML)
        },
        unmounted() {
            console.log('unmounted')
            console.log(document.getElementById('app').innerHTML)
        },
        template: "<h2 v-on:click='handleItemClick'>{{message}}</h2>"
    
    })
    app.mount("#app")
    /*
      beforeUpdate 和 undatad生命周期函数 
      /这两个生命周期函数在vue中的data数据发生变化时 才回被执行 
      /变化之前 /变化之后 
            //当data中的数据发生变化的时候 会立即自动执行的函数 
            beforeUpdate(){ 
                console.log("beforeUpdate")
            }

            //updatad 当data中的数据发生变化时 页面重新渲染完后 会自动执行的函数 
            updata(){
                console.log("data变化了 页面重新渲染完后 是我 ")
            }

            //这俩生命周期的区别 ？
            在beforeUpdate时，DOM的内容并没有渲染更新，
            而到了updated中DOM的内容已经进行了更新

    //beforeUnmount 和 unmounted生命周期函数 
        /这两个生命周期函数时vue在vue销毁时自动执行的函数 
        /销毁前执行 /销毁后执行 

        beforeUnmount() {
            console.log('beforeUnmount')
        },
        unmounted() {
            console.log('unmounted')
        },
        那如何能看到这个效果那？这个需要在浏览器的控制台中输入销毁代码。
        app.unmount()
        
        //区别？
            在浏览器执行app.unmount(),会看到，在beforeUnmount方法中还是有DOM内容的，
            然后到了unmounted方法中，就已经没有任何的DOM内容了。


    
      */
</script>